<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            position: absolute;
            top:40px;
            left: 10px;
            height: 100px;
            width: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
<button>Go</button>
<div>

</div>
<script>

        var btn = document.getElementsByTagName('button')[0];
        var div = document.getElementsByTagName('div')[0];
    btn.onclick = function () {
        var  json1 = {
            'left':300,
            'top':200,
            'width':300,
            'height':200
        },
            json2={
          'left':10,
          'top':30,
                'width':100,
                'height':100
        };
        animate(div,json1,null)
    };
        function animate(ele,json,fn) {
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;
                for(var k in json){
                    var leader = parseInt(getStyle(ele,k))||0;
                    var step = (json[k]-leader)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    ele.style[k] = leader +'px';
                    if(Math.abs(json[k]-leader)>Math.abs(step)){
                        bool = false;
                    }
//                    if(json[k] !== leader){
//                        bool = false;
//                    }
                }
                if(bool){
                    clearInterval(ele.timer);
                    if(fn){
                        fn();
                    }
                }
            },25)
        }

        function getStyle(ele,attr) {
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }
</script>
</body>
</html>